<div class="table-info">
	<div class="menus">
      <md-button ng-click="saveModules()" class="md-raised">保存</md-button>
      <md-button ng-click="back()" class="md-raised">取消</md-button>
    </div>
    <div>
	<table class="table table-bordered" border="0" width="400" name="table1">
			<tr>
				<td width="40%" name="list1">
					<div class="tree">
						<ul>
						  <li ng-repeat="module in vm.leftTree" ng-class="{closed:vm.leftTree.isFolded(module)}">
						    <div>
						      <input type="checkbox" ng-model="module.checked" ng-change="vm.leftTree.check(module, module.checked)"
						             ng-class="{intermediate: vm.leftTree.isSemiChecked(module)}" id="module.moduleId"/>
						        <span ng-click="vm.leftTree.toggleFold(module)">
						          <span class="caret" ng-if="module.childModule.length>0"></span>
						          {{module.moduleName}}
						        </span>
						    </div>
						    <ul ng-class="{hidden: vm.leftTree.isFolded(module)}">
						      <li ng-repeat="childModule in module.childModule" ng-class="{closed:vm.leftTree.isFolded(childModule)}">
						        <input type="checkbox" ng-model="childModule.checked" ng-change="vm.leftTree.check(childModule, childModule.checked)"
						               ng-class="{intermediate: vm.leftTree.isSemiChecked(childModule)}"/>
						          <span ng-click="vm.leftTree.toggleFold(childModule)">
						            <span class="caret" ng-if="childModule.children.length>0"></span>
						            {{childModule.moduleName}}
						          </span>
						        <ul ng-class="{hidden: vm.leftTree.isFolded(childModule)}">
						          <li ng-repeat="grandsonModule in childModule.children">
						            <label ng-click="moveOption()">
						              <input type="checkbox" ng-model="grandsonModule.checked" ng-change="vm.leftTree.check(grandsonModule, grandsonModule.checked)"/>
						              {{grandsonModule.moduleName}}
						            </label>
						          </li>
						        </ul>
						      </li>
						    </ul>
						  </li>
						</ul>
					</div>
				</td>
				<td width="20%" align="center">
				
				<md-button class="md-raised" ng-click="moveRight()" style="margin: 40px 20px;padding: 7px 25px;" >右移</md-button>
				<br/>
				<md-button class="md-raised" ng-click="moveLeft()" style="margin: 40px 20px;padding: 7px 25px;" >左移</md-button>
				 
				<br/>
					
				</td>
				<td width="40%">
					<div class="tree">
						<ul>
						  <li ng-repeat="module in vm.rightTree.children" ng-class="{closed:vm.rightTree.isFolded(module)}">
						    <div>
						      <input type="checkbox" ng-model="module.checked" ng-change="vm.rightTree.rightCheck(module, module.checked)"
						             ng-class="{intermediate: vm.rightTree.isSemiChecked(module)}"/>
						        <span ng-click="vm.rightTree.toggleFold(module)">
						          <span class="caret"></span>
						          {{module.moduleName}}
						        </span>
						    </div>
						    <ul ng-class="{hidden: vm.rightTree.isFolded(module)}">
						      <li ng-repeat="childModule in module.children" ng-class="{closed:vm.rightTree.isFolded(childModule)}">
						        <input type="checkbox" ng-model="childModule.checked" ng-change="vm.rightTree.rightCheck(childModule, childModule.checked)"
						               ng-class="{intermediate: vm.rightTree.isSemiChecked(childModule)}"/>
						          <span ng-click="vm.rightTree.toggleFold(childModule)">
						            <span class="caret"></span>
						            {{childModule.moduleName}}
						          </span>
						        <ul ng-class="{hidden: vm.rightTree.isFolded(childModule)}">
						          <li ng-repeat="grandsonModule in childModule.children">
						            <label>
						              <input type="checkbox" ng-model="grandsonModule.checked" ng-change="vm.rightTree.rightCheck(grandsonModule, grandsonModule.checked)"/>
						              {{grandsonModule.moduleName}}
						            </label>
						          </li>
						        </ul>
						      </li>
						    </ul>
						  </li>
						</ul>
					</div>
				</td>
			</tr>	
	</table>
	</div>
<style type="text/css">
	.tree li {
	  cursor: pointer;
	  padding-left: 1.3em;
	}

	.tree ul {
	  list-style: none;
	  padding-left: 0;
	}

	.intermediate {
	  opacity: 0.3;
	}
</style>
</div>






















































































































































































































<!-- <div class="tree">
  <ul>
    <li ng-repeat="country in vm.countries" ng-class="{closed:vm.tree.isFolded(country)}">
      <div>
        <input type="checkbox" ng-model="country.checked" ng-change="vm.tree.check(country, country.checked)"
               ng-class="{intermediate: vm.tree.isSemiChecked(country)}"/>
          <span ng-click="vm.tree.toggleFold(country)">
            <span class="glyphicon" ng-class="vm.tree.isFolded(country)?'glyphicon-plus':'glyphicon-minus'"></span>
            <span class="caret"></span>
            <img ng-src="images/{{country.flag}}"/>
            {{country.label}}
          </span>
      </div> -->
<!--       <ul ng-class="{hidden: vm.tree.isFolded(country)}">
        <li ng-repeat="province in country.items" ng-class="{closed:vm.tree.isFolded(province)}">
          <input type="checkbox" ng-model="province.checked" ng-change="vm.tree.check(province, province.checked)"
                 ng-class="{intermediate: vm.tree.isSemiChecked(province)}"/>
            <span ng-click="vm.tree.toggleFold(province)">
              <span class="glyphicon" ng-class="vm.tree.isFolded(province)?'glyphicon-plus':'glyphicon-minus'"></span>
              {{province.label}}
            </span>
          <ul ng-class="{hidden: vm.tree.isFolded(province)}">
            <li ng-repeat="city in province.items">
              <label>
                <input type="checkbox" ng-model="city.checked" ng-change="vm.tree.check(city, city.checked)"/>
                {{city.label}} -->
   <!--            </label>
            </li>
          </ul>
        </li>
      </ul> -->
  <!--   </li>
  </ul>
</div> -->